<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>Beaker</title>
  <link rel="stylesheet" href="beaker://assets/icons.css">
  <link rel="stylesheet" href="beaker://assets/font-awesome.css">
  <style>
  body {
    --bg-color--foreground: #fff;
    --bg-color--background: #f5f5f5;
    --bg-color--content: #fff;
    --bg-color--input: #fff;
    --text-color--input: #222;
    --border-color--input: #bbc;
    --border-color--input--focused: #1d59c7;

    --bg-color--location-input: #fff;
    --bg-color--location-zoom: #f5f5f5;
    --bg-color--location-zoom--hover: #eaeaea;
    --bg-color--location-dat-convert-btn: #008dff; 
    --bg-color--location-dat-convert-btn--hover: #0076d6;
    --text-color--location-input: #222;
    --text-color--location-input--light: #777;
    --text-color--location-btn: #666;
    --text-color--location-bookmark--pressed: #2196F3;
    --text-color--location-dat-convert-btn: #fff;
    --text-color--location-live-reload-btn: #ffff91;
    --text-stroke-color--location-live-reload-btn: #daba47;
    --text-shadow-color--location-live-reload-btn: gold;
    --border-color--location-input: var(--border-color--input);
    --border-color--location-input--trusted: #91a6d6;
    --border-color--location-input--untrusted: #e6aaaa;
    --border-color--location-zoom: #ccc;

    --text-color--cert--notrust: #333;
    --text-color--cert--trusted: #0a52d6;
    --text-color--cert--secure: #3c943c;
    --text-color--cert--warning: #e2b206;
    --text-color--cert--untrusted: #D11A1A;
    --text-color--cert-sublabel: #fff;
    --bg-color--cert--default: #eeeef3;
    --bg-color--cert--trusted: #e6ebff;
    --bg-color--cert--untrusted: #ffe6e6;
    --bg-color--cert--default--hover: #e3e3e7;
    --bg-color--cert--trusted--hover: #d9dffb;
    --bg-color--cert--untrusted--hover: #f5d1d1;
    --bg-color--cert-sublabel: #2fb935;

    --border-color--tab: #e0e0e0;
    --highlight-color--tab--current: #005aff;
    --text-color--tab--title: #555;
    --text-color--tab--close: #333;
    --text-color--bg-tabs-btn: #666;
    --text-color--tab--add: #666;
    --text-color--tab--add--hover: #333;
    --bg-color--tab--hover: #f3f3f8;
    --bg-color--tab--current: var(--bg-color--foreground);
    --bg-color--tab--dragover: #ddddea;
    --bg-color--tab-close--hover: #eee;
    --bg-color--tab-close--current--hover: #eee;

    --border-color--navbar: #e0e0e0;
    --text-color--navbar-btn: #333;
    --stroke-color--navbar-btn: #666;
    --text-color--navbar-btn--lighter: #555;
    --text-color--navbar-btn--success: #67bf6b;
    --text-color--navbar-btn--warning: #FF9800;

    --bg-color--paneborder: #ccc;
    --bg-color--paneborder--active: #4d82e4;
    --bg-color--pane-status-bar: #fff;
    --bg-color--pane-status-bar--active: #f3f3f3;
    --bg-color--pane-status-bar-button--hover: #ddd;
    --text-color--pane-status-bar: #888;
    --text-color--pane-status-bar--active: #555;
    --text-color--pane-status-bar-indicator: #4d82e4;

    font-family: -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", Ubuntu, Cantarell, "Oxygen Sans", "Helvetica Neue", sans-serif;
    margin: 0;
    padding: 0;
    background: var(--bg-color--background);
    height: 100vh;
  }
  @media (prefers-color-scheme: dark) {
    body {
      --bg-color--foreground: #333;
      --bg-color--background: #1f1f1f;
      --bg-color--content: #fff;
      --bg-color--input: #222;
      --text-color--input: #eee;
      --border-color--input: #666;
      --border-color--input--focused: #1d59c7;

      --bg-color--location-input: #222;
      --bg-color--location-zoom: #333;
      --bg-color--location-zoom--hover: #333;
      --bg-color--location-dat-convert-btn: #008dff;
      --bg-color--location-dat-convert-btn--hover: #0076d6;
      --text-color--location-input: #eee;
      --text-color--location-input--light: #ccc;
      --text-color--location-btn: #ccc;
      --text-color--location-bookmark--pressed: #3f83ff;
      --text-color--location-dat-convert-btn: #fff;
      --text-color--location-live-reload-btn: #ffff91;
      --text-stroke-color--location-live-reload-btn: #daba47;
      --text-shadow-color--location-live-reload-btn: gold;
      --border-color--location-input: var(--border-color--input);
      --border-color--location-input--trusted: #4d71d6;
      --border-color--location-input--untrusted: #712020;
      --border-color--location-zoom: #666;

      --text-color--cert--notrust: #ccc;
      --text-color--cert--trusted: #d2d8fd;
      --text-color--cert--secure: #3c943c;
      --text-color--cert--warning: #e2b206;
      --text-color--cert--untrusted: #ffdddd;
      --text-color--cert-sublabel: #fff;
      --bg-color--cert--default: #333;
      --bg-color--cert--trusted: #333;
      --bg-color--cert--untrusted: #352121;
      --bg-color--cert--default--hover: #444;
      --bg-color--cert--trusted--hover: #444;
      --bg-color--cert--untrusted--hover: #521212;
      --bg-color--cert-sublabel: #2fb935;

      --border-color--tab: #333;
      --highlight-color--tab--current: #005aff;
      --text-color--tab--title: #ddd;
      --text-color--tab--close: #ccc;
      --text-color--bg-tabs: #666;
      --text-color--tab--add: #666;
      --text-color--tab--add--hover: #888a;
      --bg-color--tab--hover: var(--bg-color--foreground);
      --bg-color--tab--current: var(--bg-color--foreground);
      --bg-color--tab--dragover: #ddddea;
      --bg-color--tab-close--hover: #222;
      --bg-color--tab-close--current--hover: #222;

      --border-color--navbar: #222;
      --stroke-color--navbar-btn: #bbb;
      --text-color--navbar-btn: #bbb;
      --text-color--navbar-btn--lighter: #bbb;
      --text-color--navbar-btn--success: #67bf6b;
      --text-color--navbar-btn--warning: #242322;

      --bg-color--paneborder: #333;
      --bg-color--paneborder--active: #4d82e4;
      --bg-color--pane-status-bar: #222;
      --bg-color--pane-status-bar--active: #333;
      --bg-color--pane-status-bar-button--hover: #333;
      --text-color--pane-status-bar: #666;
      --text-color--pane-status-bar--active: #aaa;
      --text-color--pane-status-bar-indicator: #4d82e4
    }
  }
  </style>
</head>
<body>
  <shell-window></shell-window>
  <div id="svgs">
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
      <defs>
        <g id="svg-padlock" fill="none" stroke-width="1" fill-rule="evenodd">
          <g transform="translate(0.000000, 13.000000)">
            <rect x="0" y="89" width="180" height="119" rx="8" fill="#3c943c" />
            <path d="M32.9765625,89.125 C32.9704162,88.7923789 33,55.3340372 33,55 C33,24.6243388 58.5197693,0 90,0 C121.480231,0 147,24.6243388 147,55 C147,55.3340372 146.144818,88.9427695 146.138672,89.2753906" stroke="#3c943c" stroke-width="25"/>
          </g>
        </g>
      </defs>
    </svg>
  </div>
</body>
</html>
